<template>
  <div>
    <el-row v-for="rowItems in rows" :key="rowItems[0].id" class="video-row">
      <el-col v-for="item in rowItems" :key="item.id" :span="6">
        <div class="video-item" @click="playVideo(item)">
          <!-- 视频项内容放在这里 -->
          <img :src="item.thumbnail" alt="视频缩略图" class="thumbnail" />
          <div>{{ item.title }}</div>
        </div>
      </el-col>
    </el-row>
    <el-pagination
        layout="prev, pager, next"
        :total="totalVideos"
        :page-size="12"
        @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    videos: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  computed: {
    totalVideos() {
      return this.videos.length;
    },
    rows() {
      const startIndex = (this.currentPage - 1) * 12;
      return this.videos
          .slice(startIndex, startIndex + 12)
          .reduce((rows, video, index) => {
            if (index % 4 === 0) rows.push([]);
            rows[rows.length - 1].push(video);
            return rows;
          }, []);
    },
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
    playVideo(video) {
      // 在这里处理点击播放视频的逻辑，可以使用 Vue Modal 或其他库实现
      alert('点击播放视频：' + video.title);
    },
  },
};
</script>

<style>
/* 样式略 */
.thumbnail {
  width: 240px;
  height: 135px;
}
</style>
